import React, { Component } from 'react'
import { List, Avatar } from 'antd'
const list1 = [
  'Racing car sprays burning fuel into crowd.',
  'Japanese princess to wed commoner.',
  'Australian walks 100km after outback crash.',
  'Man charged over missing wedding girl.',
  'Los Angeles battles huge wildfires.',
]
export default class MyList extends Component{
  render() {
    return (
      <>
        <div className='box'>
          <div className='box-header'>base</div>
          <div className='box-body'>
            <div className='box-content'>
              <List header={<div>header</div>} footer={<div>footer</div>} dataSource={list1} renderItem={item => <List.Item>{item}</List.Item>} bordered />
            </div>
          </div>
        </div>
        <div className='box'>
          <div className='box-header'>meta</div>
          <div className='box-body'>
            <div className='box-content'>
              <List header={<div>header</div>} footer={<div>footer</div>} dataSource={list1} bordered renderItem={item => (
                <List.Item
                  actions={[<a>edit</a>, <a>more</a>]}
                >
                  <List.Item.Meta
                    avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
                    title={<a href="javascript:void(0);">title</a>}
                    description={item}
                  />
                  <div>content</div>
                </List.Item>
              )} />
            </div>
          </div>
        </div>
        <div className='box'>
          <div className='box-header'>itemLayout</div>
          <div className='box-body'>
            <div className='box-content'>
              <List itemLayout='vertical' header={<div>header</div>} footer={<div>footer</div>} dataSource={list1} bordered renderItem={item => (
                <List.Item
                  actions={[<a>edit</a>, <a>more</a>]}
                  extra={
                    <img
                      width={272}
                      alt="logo"
                      src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
                    />
                  }
                >
                  <List.Item.Meta
                    avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
                    title={<a href="javascript:void(0);">title</a>}
                    description={item}
                  />
                  <div>content</div>
                </List.Item>
              )} />
            </div>
          </div>
        </div>
      </>
    )
  }
}